<template>
  <div class="card">
      <div style="margin-bottom: 10px;">
          <el-input placeholder="请输入电影名称查询" v-model="data.name" clearable style="width: 300px;margin-right: 10px;"/>
          <el-button type="primary" @click="load">查询</el-button>
      </div>
      <div style="margin-bottom: 10px;">
          <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
      <el-table :data="data.tableData" stripe>
        <el-table-column prop="name" label="名称" />
        <el-table-column label="操作">
              <template #default="scope">
                  <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 5px;">
          <el-pagination background layout="total,prev, pager, next"
                           v-model:current-page="data.pageNum"
                           v-model:page-size="data.pageSize"
                         :total="data.total"  @current-change="load" />
      </div>
      <el-dialog v-model="data.formVisible" title="电影分类" width="40%">
          <el-form :model="data.form" label-width="80px" style="margin-right: 20px;">
              <el-form-item label="名称">
                  <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
              </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button @click="data.formVisible = false">取 消</el-button>
                  <el-button type="primary" @click="save">
                      保 存
                  </el-button>
              </div>
          </template>
      </el-dialog>
  </div>

</template>

<script setup>
  import {reactive} from "vue";
  import request from "@/utils/request";
  import {ElMessage} from "element-plus";
  const data = reactive({
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      name: null,
      formVisible: false,
      form: {}
  })
  const load = () => {
      request.get("/category/selectPage",
          {
              params: {
                  pageNum: data.pageNum,
                  pageSize: data.pageSize,
                  name: data.name,
          }
          }).then(res => {
          data.tableData = res.data.list;
          data.total = res.data.total;
      })
  }
  load();
  // 初始化新增表单数据
  const handleAdd = () => {
      data.form = {};
      data.formVisible = true;
  }
  const add = () => {
      request.post("/category/add", data.form).then(res => {
          if (res.code === '200') {
              load();
              data.formVisible = false;
              ElMessage.success("添加成功");
          }else {
              ElMessage.error(res.msg);
          }
      })
  }
  // 编辑按钮触发
  const handleEdit = (row) => {
      data.form = JSON.parse(JSON.stringify(row));//给表单赋值当前行对象数据 深拷贝
      data.formVisible = true;
  }
  const update = () => {
      request.put("/category/update", data.form).then(res => {
          if (res.code === '200') {
              load();
              data.formVisible = false;
              ElMessage.success("修改成功");
          }else {
              ElMessage.error(res.msg);
          }
      })
  }
  const save = () => {
      data.form.id ? update() : add();
  }
  // 删除按钮触发
  const handleDelete = (id) => {
      ElMessageBox.confirm(
          '你确定要删除该条记录吗?',
          '确认删除',
          {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
          }
      )
          .then(() => {
              request.delete("/category/delete/" + id).then(res => {
                  if (res.code === '200') {
                      load();
                      ElMessage({
                          type: 'success',
                          message: '删除成功',
                      })
                  }
              })

          })
          .catch(() => {
              ElMessage.error('用户已取消删除')
          })

  }
</script>

